
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script type="text/javascript" src="../../js/area.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/ajax.js"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row style="background-color: #FF4444;padding: 10px;color: white;">
					<van-col span="10">
						<p @click="left()">
							<van-icon name="arrow-left"/>
						</p>
					</van-col>
					<van-col span="10">
						<p>注册用户</p>
					</van-col>
				</van-row>
			</header>
			<section>
				<van-cell-group>
					<van-field placeholder="手机号码" v-model="phone"></van-field>
					<van-field center v-model="verify" clearable placeholder="验证码(6位数字短信验证码)">
						<van-button slot="button" size="small" type="danger" @click="OnVerify()">发送验证码</van-button>
					</van-field>
					<van-field type="password" placeholder="登录密码(最少6位)" v-model="pwd" ></van-field>
					<van-field type="password" placeholder="确认密码(再次输入登录密码)" v-model="repeatpwd" ></van-field>
					<van-field placeholder="昵称(最多20个字符)" v-model="user"></van-field>
					<van-cell title="地址" is-link :value="areaname" @click="areaSelect"/>
				</van-cell-group>
				<van-popup v-model="show" position="bottom">
					<van-area :area-list="areaList" :columns-num="3" title="地址" :value="area"  @cancel="exit" @confirm="sure" @change="OnChange"/>
				</van-popup>
				<h5 style="text-align: center;">注册会员即表示同意<a href="">《万众雅讯用户注册协议》</a></h5>
				<van-button size="large" type="danger" style="margin-top: 20px;" @click="register()">立即注册</van-button>
			</section>
			<footer>

			</footer>
		</div>
	</body>
	<script>
		var onverify;//输入的验证码
		var vm = new Vue({
			el: "#app",
			data:{
				phone:"",//电话号码
				verify:"",//验证码
				pwd:"",//密码
				repeatpwd:"",//确认密码
				user:"",//用户名
				areaname:"请选择地址",
				area:"110101",//地区
				areaList:address,
				show:false
			},
			methods:{
				register:function(){/*立即注册*/
					if(this.pwd!=this.repeatpwd){
						alert("输入有误，请重新输入!");
					}else{
						ajax({
							url:"http://dsapi.ysd3g.com/API/UserRegister",
							data:{
								phone:this.phone,//电话号码
								code:this.verify,//验证码
								password:this.pwd,//密码
								districtCode:this.area,//地区编号
								nickName:this.user,//用户名称
							},
							dataType:"jsonp",
							success:function(res){								
								console.log(res);
								if(res.Error==false){
									alert("注册成功!");
									plus.webview.open("login.html",login,{
										zindex:1,
										scrollIndicator:"none"
									})
								}else{
									alert("注册失败!");
								}
							}
						});
					}
				},
				areaSelect:function(){/*弹出地址栏*/
					this.show=!this.show;
				},
				sure:function(){/*省区选择栏确定*/
					
					this.show=false;
				},
				exit:function(){/*省区选择栏取消*/
					this.area="110101";
					this.show=false;
				},
				OnChange:function(picker){/*改变的值*/
					this.areaname="";/*归零地址栏的值*/
					console.log(picker);
					console.log(picker.getValues()[2]);
					for(var i=0;i<3;i++){
						this.areaname+=picker.getValues()[i].name;/*获取到所选省市区*/
					}
					console.log(this.areaname);
					this.area=picker.getValues()[2].code;/*获取到省市区的编号*/
				},
				OnVerify:function(){/*发送验证码*/
					if(this.phone.length!=11){
						alert("电话号码有误!");
					}else{
						ajax({
							url:"http://dsapi.ysd3g.com/API/SendRegisterPhoneCode",
							data:{
								phone:this.phone
							},
							dataType:"jsonp",
							success:function(res){
								console.log(res);
								alert("验证成功,你的验证码为:"+res.Code);
							}
						});
					}
				}
			}
		})
	</script>
</html>
